<template>
	<view class="businessOrderList">
		<view v-for="(item, index) in listData" @click.stop="clickDetail(item)"
			:class="{ 'content-box': true, 'active': isActive == index }" :key="index" @click="changeColor(index)">
			<!-- :class="['content-box',isActive == index ? 'active' :'']" -->
			<!-- 上面部分 -->
			<view class="content-top" v-if="item.orderType !== 3">
				<view class="top-title">
					<view class="name">{{ item.receiveName }}</view>
					<view class="phone">{{ item.receivePhonenum }}</view>
				</view>
				<view class="address">{{ item.receiveAddress }}</view>
			</view>
			<!-- 中间部分 -->
			<view class="content-center" v-for="(items, indexs) in item.fxOrderItemList" :key="indexs">
				<view class="center-left">
					<image class="left-icon-img" :src="baseUrl + items.goodImg" mode="aspectFill" />
				</view>
				<view class="center-right">
					<view class="right-title">
						{{ items.goodName }}
					</view>
					<view class="right-content">
						<view class="right-num">
							<text class="total">X{{ items.goodCount }}</text>
						</view>
						<view class="right-money">
							￥<text class="money">{{ items.goodPrice }}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 配送状态 -->
			<view class="status-box">
				<view class="box-left">
					<text class="label" :style="{ color: statusConfig[item.orderStatus].color }">
						{{ statusConfig[item.orderStatus].text }}
					</text>
				</view>
				<view class="box-right">
					<view v-if="item.orderStatus === 2" class="delivered" @click.stop="toDelivered(item)">已送达</view>
					<view v-if="item.orderStatus === 1" class="delivered" @click.stop="goShip(item)">去发货</view>
					<view v-if="item.orderStatus === 4" class="completed">已完成</view>
				</view>
			</view>
			<!-- 底部信息 -->
			<view class="content-down">
				<view class="down-top">
					<view v-if="item.orderStatus !== 1" class="createTime">
						下单时间：
						<text class="contents">{{ item.createTime }}</text>
					</view>
					<view class="createTime">
						订单类型：
						<text class="contents">{{ item.orderType=== 3 ?'零售订单':'线上订单' }}</text>
					</view>
					<view v-if="item.orderStatus !== 1 && item.orderType !== 3" class="storeName">
						配送员：
						<text class="contents">{{role == 3?item.supplierName: item.storeName }}</text>
					</view>
					<view v-if="item.orderStatus !== 1 && item.orderType !== 3" class="tel">
						配送员手机号：
						<text class="contents">{{role == 3?item.supplierPhone:item.storePhone }}</text>
					</view>
				</view>
				<view class="down-other" v-if="item.orderType !== 3">配送方式：<text
						class="contents">{{ item.deliveryType == 1? '普通配送' : '加急配送' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl,
		baseImgUrl,
		baseIconUrl
	} from '@/config'
	export default {
		name: "businessOrderList",
		data() {
			return {
				baseUrl,
				baseImgUrl,
				baseIconUrl,
				listData: [],
				role: '',
				statusConfig: {
					1: {
						text: '待发货',
						color: '#EB2727'
					},
					2: {
						text: '配送中',
						color: '#000'
					},
					3: {
						text: '待收货',
						color: '#000'
					},
					4: {
						text: '已完成',
						color: '#000'
					},
					5: {
						text: '已退单',
						color: '#000'
					},
				},
				isActive: 0
			}
		},
		props: {
			businessOrderList: {
				type: Array,
				default: []
			}
		},
		watch: {
			businessOrderList: {
				handler(newVal, oldVal) {
					this.listData = uni.$u.deepClone(newVal)
				},
				deep: true
			}
		},
		created() {
			this.listData = uni.$u.deepClone(this.businessOrderList)
			this.role = uni.getStorageSync('roleId')
		},
		methods: {
			changeColor(index) {
				this.isActive = index
			},
			toDelivered(item) {
				this.$emit('toDelivered', item)
				// uni.navigateTo({
				// 	url: '/subPages/otherPages/orderArrive',
				// })
			},
			goShip(item) {
				this.$emit('goShip', item)
			},
			clickDetail(item) {
				console.log(item);
				uni.navigateTo({
					url: `/subPages/order/orderDetail?id=${item.id}`
				})
			},
			// clickBasic(item) {
			//   uni.navigateTo({
			//     url: `/subPages/userIndex/memberCenter/basicInfo?cardId=${item.id}`,
			//   })
			// }
		}
	}
</script>
<style lang="scss">
	.businessOrderList {
		padding-bottom: 240upx;
	}

	.content-box {
		width: 690rpx;
		margin: 15rpx auto;
		border-radius: 16rpx;
		background: #fff;
		padding: 20rpx;

		.content-top {
			padding: 20rpx;
			background: #F2F2F2;
			border-radius: 12rpx;

			.top-title {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #000;

				.phone {
					margin-left: 20rpx;
				}
			}

			.address {
				font-size: 24rpx;
				color: #b5b5b5;
				margin-top: 8rpx;
			}
		}

		.content-center {
			display: flex;
			margin-top: 20rpx;

			.center-left {
				width: 140rpx;
				height: 140rpx;
				border-radius: 8rpx;

				.left-icon-img {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}

			.center-right {
				flex: 1;
				margin-left: 13rpx;

				.right-title {
					font-size: 28rpx;
				}

				.right-content {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 18rpx;

					.model {
						font-size: 24rpx;
						color: #b5b5b5;
					}

					.total {
						margin-left: 10rpx;
					}

					.right-money {
						color: #EB2727;
						font-size: 24rpx;

						.money {
							font-size: 34rpx;
						}
					}
				}
			}
		}

		.status-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			margin-top: 20rpx;

			.delivered {
				padding: 12rpx 48rpx;
				border-radius: 140rpx;
				border: 2rpx solid #126352;
				color: #126352;
			}

			.completed {
				padding: 12rpx 48rpx;
				border-radius: 140rpx;
				border: 2rpx solid #999;
				color: #999;
			}
		}

		.content-down {
			margin-top: 20rpx;
			color: #999;

			.contents {
				margin-left: 10rpx;
				color: #000;
			}

			.down-top {
				>view {
					margin-top: 20upx;
				}

				// display: flex;
				// justify-content: space-between;
				// align-items: center;
				.storeName {
					display: block;
				}
			}

			.down-other {
				margin-top: 20rpx;
			}
		}
	}

	.active {
		width: 690rpx;
		margin: 15rpx auto;
		border-radius: 16rpx;
		background: #fff;
		padding: 20rpx;
		border: 1px solid #126352;
	}
</style>